<template>
  <div>
    <div class="search-box">
      <div class="top-bar-wrapper"
           :style="{width:select.hWidth.width+'px'}">
        <div class="top-bar-scroll">
          <ul class="selected-list" :style="{width:(select.personSelectList.length*50)+'px'}">
            <li v-for="p in select.personSelectList">
              <img :src="p.headPhotoUrl||'../public/images/default_contact.png'"
                   onerror="this.src='../public/images/default_contact.png'"><span>{{p.NAME||p.name}}</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="search-flex" :style="{'left': (select.hWidth.width||10)+'px'}">
        <input v-if="type=='dept'" type="search" class="search-input" @input="search()"
               v-model="select.deptSearchVal" placeholder="搜索">
        <input v-else type="search" class="search-input" @input="search()"
               v-model="select.personSearchVal" placeholder="搜索">
        <span class="mui-icon mui-icon-search"></span>
      </div>
    </div>
    <!--<div class="emp_search_list" v-show="searchVal" :style="seaListCss">-->
    <!--<div class="mui-scroll-wrapper" :class="{'list_is_null': select.searchList.length==0}">-->
    <!--<div class="mui-scroll">-->
    <!--<ul class="mui-table-view dept-list">-->
    <!--<li v-for="list in select.searchList" v-if="type=='dept'" class="mui-table-view-cell">-->
    <!--<span @tap="selectIndex($index)" class="mui-icon"-->
    <!--:class="{'crm-circle': !list.selected,'crm-solid-check': list.selected,'selected': list.selected}"></span>-->
    <!--<a @tap="selectIndex($index)">-->
    <!--<span class="up_dep">{{list.upDept}}</span>-->
    <!--<span>{{list.name}}</span><span-->
    <!--class="mui-icon mui-icon-arrowright arrow"></span></a>-->
    <!--</li>-->
    <!--</ul>-->
    <!--<ul class="mui-table-view">-->
    <!--<li v-for="list in select.searchList" v-if="type=='staff'"-->
    <!--class="mui-media mui-checkbox mui-left mui-table-view-cell">-->
    <!--<input name="checkbox" type="checkbox" v-model="list.selected">-->
    <!--<a v-if="list.name" @tap="selectIndex($index)">-->
    <!--<img class="mui-media-object mui-pull-left"-->
    <!--:src="list.headPhotoUrl||'../public/images/default_contact.png'"-->
    <!--onerror="this.src='../public/images/default_contact.png'">-->
    <!--<div class="mui-media-body">-->
    <!--{{list.name}}-->
    <!--<p class='mui-ellipsis' v-text="list.title||''"></p>-->
    <!--</div>-->
    <!--</a>-->
    <!--</li>-->
    <!--</ul>-->
    <!--</div>-->
    <!--</div>-->
    <!--</div>-->
  </div>
</template>
<script>
  // 公共的数据
  var nativeApi = require('nativeApi');
  import store from './em-store';
  export default {
    props: {
      type: ''  // 搜索部门(dept)或人员(staff)
    },
    data: function () {
      return {
        scroller: null,
        searchVal: '',
        select: store.state,
        seaListCss: {
          height: (window.screen.height - 130) + 'px'
        }
      };
    },
    methods: {
      search: function () {
        var self = this;
//          searchVal = self.searchVal;
//        store.search(searchVal, self.type);
        store.search(self.type == 'dept' ? self.select.deptSearchVal : self.select.personSearchVal, self.type);
      },
      inputFocus: function () {
        var self = this;
        nativeApi.showKeyboard({
          callback: function (result) {
            self.searchVal = result.result;
            self.methods.search();
          }
        });
      },
      selectIndex: function (index) {
        var self = this,
          selectData = this.select.searchList[index];
        if (!selectData.selected) {
          if (selectData.type === 'staff') {
            store.addEmp(selectData);
          } else if (selectData.type === 'dept') {
            store.addDeptEmp(selectData.id, function () {
              store.setDeptSelect(selectData.id);
            });
          }
          self.searchVal = '';
        } else {
          selectData.selected = false;
          store.deleteEmp(selectData.id);
          self.searchVal = '';
        }
      }
    },
    events: {},
    created: function () {
    },
    ready: function () {
      this.scroller = mui('.search-box .top-bar-wrapper').scroll({
        scrollY: false,
        scrollX: true,
        indicators: true
      });
      mui('.mui-scroll-wrapper').scroll();
    }
  }
</script>
